<template>
	<view>
		<view class="topline"></view>
		<view class="address" @click="$fun.jump('/pageA/address/address?source=1')">
			<view class="left">收货地址</view>
			<view class="right">
				<view class="" v-if="addressData.address">
					<view class="">{{addressData.address}}</view>
					<view class="">{{addressData.area}}</view>
					<view class="">{{addressData.name}} {{addressData.phone}}</view>
				</view>
			</view>
			<view class="right">
				<image src="../../static/goin.png" mode=""></image>
			</view>
		</view>
		<view class="isline"></view>
		<view class="isgoods" v-for="(item,index) in info_detail.goods" :key="index">
			<image :src="$fun.imgUrl(item.image)" mode=""></image>
			<view class="isgoods_text">
				<view class="">
					<u--text :lines="2" size='14' color='#333333' :text="item.name"></u--text>
				</view>
				<view class="isgoods_num">
					<view class="">￥{{item.money}}</view>
					<view class="textnum">x{{item.num}}</view>
				</view>
			</view>
			<view class="showmodel_num">
				<view class="">
					<u-number-box min='1' v-model="item.num" button-size="22" @change="valChange"></u-number-box>
				</view>
			</view>
		</view>
		<view class="isline"></view>
		<view class="yt-list">
			<view class="yt-list-cell">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{info_detail.money}}</text>
			</view>
			<view class="yt-list-cell">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">免运费</text>
			</view>
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="memo" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="isbtn">
			<view class="ispay">
				<view class="left">
					<view class="">小计</view>
					<view class="num"> <text>￥</text>{{info_detail.money}} </view>
				</view>
				<view class="rbtn" @click="submit">立即支付</view>
			</view>
		</view>
		<showpayVue ref="child" :type='type' :showpaymodel="showpaymodel" :oid='oid' @showpaybtn="showpaybtn">
		</showpayVue>
	</view>
</template>

<script>
	import showpayVue from './showpay.vue';
	export default {
		components: {
			showpayVue
		},
		data() {
			return {
				type: '1',
				maskState: 0, //优惠券面板显示状态
				memo: '', //备注
				payType: 1, //1微信 2支付宝
				couponList: [],
				addressData: {
					address: '',
					area: '',
					name: '',
					phone: ''
				},
				addressData1: {
					address: '',
					area: '',
					name: '',
					phone: ''
				},
				// 商品详情
				info_detail: [],
				// 商品id
				ids: "",
				// 商品数量
				nums: "",
				disabled: false,
				// navList:['个人地址','服务中心'],
				tabCurrentIndex: 0,
				oid: '',
				showpaymodel: false
			}
		},
		onLoad(option) {
			this.ids = option.id;
			this.nums = 1;
			let prams = {
				ids: option.id,
				nums: 1
			}
			this.$fun.ajax.post('goods/getgoods', {
				...prams
			}).then(res => {
				if (res.code == 1) {
					this.info_detail = res.data
					this.addressData = res.data.address ? res.data.address : {}
				}
			})
		},
		onShow() {
			let addressData = uni.getStorageSync('addressData')
			if (addressData) {
				this.addressData = JSON.parse(addressData)
				uni.removeStorageSync('addressData')
			}
			let addressData1 = uni.getStorageSync('addressData1')
			if (addressData1) {
				this.addressData1 = JSON.parse(addressData1)
				uni.removeStorageSync('addressData1')
			}
		},
		methods: {
			showpaybtn(showpaymodel) {
				this.showpaymodel = showpaymodel
				this.zIndex = 10075
			},
			tabClick(index) {
				this.tabCurrentIndex = index
			},
			handleCountClick(val, index) {
				this.info_detail.goods[index].num = val
				this.calcTotal()
			},
			valChange(res) {
				this.info_detail.goods[0].num = res.value
				this.calcTotal()
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			calcTotal() {
				let list = this.info_detail.goods;
				let total = 0;

				list.forEach(item => {
					console.log(item.money)
					console.log(item.num)
					total += item.money * item.num;
				})
				// console.log(total)
				this.info_detail.money = Number(total.toFixed(2));
			},
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			circulation(str) {
				let ids = [];
				for (var i = 0; i < this.info_detail.goods.length; i++) {
					ids.push(this.info_detail.goods[i][str])
				}
				return ids.join(',')
			},
			submit() {
				// if(this.tabCurrentIndex==0){
				if (this.addressData.name == '') {
					this.$fun.msg('请先选择或添加地址!')
					return
				}
				// }else{
				// 	if (this.addressData1.name=='') {
				// 		this.$fun.msg('请先选择或添加地址!')
				// 		return
				// 	}
				// }
				let prams = {
					addrid: '',
					ids: this.ids,
					nums: this.info_detail.goods[0].num,
					memo: this.memo
				}
				if (this.tabCurrentIndex == 0) {
					prams.addrid = this.addressData.id
				} else {
					prams.addrid = this.addressData1.id
				}
				this.disabled = true
				this.$fun.ajax.post('order/create', {
					...prams
				}).then(res => {
					this.disabled = false
					if (res.code == 1) {
						uni.showLoading({
							title: '',
						})
						setTimeout(() => {
							uni.hideLoading()
							this.showpaymodel = true
						}, 1000)
						this.oid = res.data.oid
						this.$refs.child.getorder(this.oid);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.topline {
		width: 750rpx;
		height: 2rpx;
		background: #EAEAEA;
	}

	.isline {
		width: 750rpx;
		height: 16rpx;
		background: #F5F1EE;
	}

	.address {
		display: flex;
		height: 156rpx;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;

		.left {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.right {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.u-number-box {

		/deep/.u-number-box__plus,
		/deep/.u-number-box__minus {
			width: 28px;
		}
	}


	.isgoods {
		display: flex;
		padding: 30rpx;

		image {
			width: 160rpx;
			height: 160rpx;
		}

		&_text {
			width: 364rpx;
			margin-left: 16rpx;
		}

		&_num {
			font-weight: 600;
			font-size: 28rpx;
			color: #ED4961;
			margin-top: 20rpx;
			// margin-left: 30rpx;
			// text-align: right;

			.textnum {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.goodsid {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}

		.right {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.time {
		position: fixed;
		bottom: 98rpx;
		right: 150rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.isbtn {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 13rpx 30rpx;



		.ispay {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.left {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			display: flex;
			align-items: center;

			.num {
				font-weight: 600;
				font-size: 48rpx;
				color: #ED4961;
				margin-left: 10rpx;

				text {
					font-size: 28rpx;
				}
			}
		}

		.rbtn {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #0066FF;
			border-radius: 36rpx;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: #909399;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			// color: #909399;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: #909399;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	.showmodel_num {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		margin: 40rpx 30rpx;
	}
</style>